import { createStyles } from "antd-style"

export const useStyles = createStyles(({ token }) => {
	return {
		container: {
			display: "flex",
			flexDirection: "column",
			width: "100%",
			flex: "none",
			padding: "6px",
			alignItems: "flexStart",
			gap: "10px",
			alignSelf: "stretch",
			position: "relative",
		},
		header: {
			padding: "12px 16px",
			borderBottom: `1px solid ${token.colorBorderSecondary}`,
			display: "flex",
			justifyContent: "space-between",
			alignItems: "center",
		},
		title: {
			fontSize: token.fontSizeLG,
			fontWeight: "bold",
		},
		messageList: {
			flex: 1,
			overflow: "auto",
			padding: "8px 16px",
		},
		messageItem: {
			padding: "8px 0",
			cursor: "pointer",
			borderBottom: `1px solid ${token.colorBorderSecondary}`,
			"&:hover": {
				backgroundColor: token.colorBgTextHover,
			},
		},
		messageContent: {
			whiteSpace: "nowrap",
			overflow: "hidden",
			textOverflow: "ellipsis",
		},
		messageTime: {
			fontSize: token.fontSizeSM,
			color: token.colorTextSecondary,
		},
		inputArea: {
			zIndex: 2,
			overflow: "hidden",
			backgroundColor: token.colorBgContainer,
			borderRadius: "8px",
			boxShadow: "0px 4px 14px 0px rgba(0, 0, 0, 0.10), 0px 0px 1px 0px rgba(0, 0, 0, 0.20)",
		},
		inputGroup: {
			display: "flex",
			flexDirection: "column",
			padding: "10px",
		},
		textAreaWrapper: {
			position: "relative",
			marginBottom: "12px",
			height: "140px",
			outline: "none",
			display: "flex",
			"@media (max-width: 768px)": {
				height: "80px",
			},
		},
		textArea: {
			width: "100%",
			height: "100%",
			resize: "none",
			fontSize: token.fontSize,
			lineHeight: "1.5",
			borderColor: "unset",
			borderWidth: 0,
			padding: 0,
			borderRadius: 0,
			"&:focus": {
				boxShadow: "none",
				outline: "none",
			},
			"&:hover": {
				boxShadow: "none",
				outline: "none",
			},
		},
		toolBar: {
			display: "flex",
			justifyContent: "space-between",
			alignItems: "center",
		},
		toolBarLeft: {
			display: "flex",
			gap: "8px",
		},
		modeToggle: {
			display: "flex",
			justifyContent: "center",
			alignItems: "center",
			borderRadius: "1000px",
			border: `1px solid ${token.colorBorder}`,
			overflow: "hidden",
			gap: "4px",
			backgroundColor: "#E6E7EA",
			padding: "4px",
			fontWeight: 400,
			height: "32px",
			fontSize: "14px",
		},
		modeToggleButton: {
			color: "#1C1D2399",
			border: "none",
			padding: "2px 8px",
			height: "24px",
			cursor: "pointer",
			display: "flex",
			alignItems: "center",
			justifyContent: "center",
			gap: "4px",
		},
		modeToggleButtonActive: {
			backgroundColor: "#fff",
			color: "#000",
			borderRadius: "1000px",
		},
		toolBarRight: {
			display: "flex",
			alignItems: "center",
		},
		toolBarButton: {
			gap: 2,
			padding: "0 6px",
			"& .magic-btn-icon": {
				display: "inline-flex",
				alignItems: "center",
				justifyContent: "center",
			},
		},
		sendButton: {
			gap: 4,
			padding: "0 12px",
			"& .magic-btn-icon": {
				display: "inline-flex",
				alignItems: "center",
				justifyContent: "center",
			},
			svg: {
				stroke: "white",
			},
		},
		sendButtonDisabled: {
			svg: {
				stroke: token.colorTextDisabled,
			},
		},
		fileList: {
			display: "flex",
			flexWrap: "wrap",
			gap: 4,
			marginBottom: 8,
		},
		fileItem: {
			display: "flex",
			alignItems: "center",
			padding: "0px 8px",
			borderRadius: token.borderRadiusSM,
			fontSize: token.fontSizeSM,
			position: "relative",
			border: `1px solid ${token.colorBorder}`,
			fontWeight: 400,
			height: 32,
		},
		fileItemContent: {
			display: "flex",
			alignItems: "center",
			justifyContent: "center",
		},
		fileName: {
			marginLeft: 4,
			maxWidth: 100,
			overflow: "hidden",
			textOverflow: "ellipsis",
			whiteSpace: "nowrap",
		},
		fileSize: {
			color: token.magicColorUsages.text[3],
			marginLeft: 4,
		},
		deleteIcon: {
			marginLeft: 8,
			color: "white",
			background: token.colorError,
			width: 14,
			height: 14,
			borderRadius: "50%",
			cursor: "pointer",
			display: "flex",
			alignItems: "center",
			justifyContent: "center",
			"&:hover": {
				opacity: 0.8,
			},
		},
		hintText: {
			fontSize: token.fontSizeSM,
			color: token.colorTextSecondary,
			marginLeft: "8px",
		},
		attachmentsList: {
			display: "flex",
			flexDirection: "column",
			marginBottom: "12px",
			padding: "8px 12px",
			backgroundColor: token.colorBgElevated,
			borderRadius: token.borderRadiusSM,
			border: `1px solid ${token.colorBorderSecondary}`,
		},
		attachmentsTitle: {
			fontWeight: "500",
			fontSize: token.fontSizeSM,
			color: token.colorTextSecondary,
			marginBottom: "8px",
		},
		attachmentsContent: {
			display: "flex",
			flexWrap: "wrap",
			gap: "8px",
		},
		attachmentItem: {
			display: "flex",
			alignItems: "center",
			padding: "4px 8px",
			backgroundColor: token.colorBgContainer,
			borderRadius: token.borderRadiusSM,
			fontSize: token.fontSizeSM,
			border: `1px solid ${token.colorBorder}`,
		},
		taskListWrapper: {
			borderBottom: "1px solid #f0f0f0",
		},
		interruptIcon: {
			width: "32px",
			height: "32px",
			cursor: "pointer",
			marginRight: "10px",
		},
		taskIcon: {
			width: "16px",
			height: "16px",
		},
	}
})
